<template>
  <div class="bottom">
    <van-button type="default" round @click="$emit('close')"
      >写评论
    </van-button>
    <van-icon name="comment-o" />
    <van-icon v-if="isShowCollection" name="star" @click="delCollection" />
    <van-icon v-else name="star-o" @click="addCollection" />
    <van-icon name="good-job-o" />
    <van-icon name="share" />
  </div>
</template>

<script>
import { delArticlesCollectionAPI, postArticlesCollectionAPI } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {},
  props: {
    articles: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isShowCollection: false
    }
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  watch: {},
  created() {},
  methods: {
    // 收藏
    async addCollection() {
      if (!this.isLogin) {
        return this.$toast.fail('操作失败，请先登录')
      }
      try {
        await postArticlesCollectionAPI(this.articles.art_id)
        this.isShowFollow = true
      } catch (error) {
        this.$toast.fail('收藏失败，请重试！')
      }
      this.isShowCollection = true
    },
    // 取消收藏
    async delCollection() {
      await delArticlesCollectionAPI(this.articles.art_id)
      this.isShowCollection = false
    }
  }
}
</script>

<style scoped lang="less">
.bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 1.17333rem;
  border-top: 0.01333rem solid #d8d8d8;
  background-color: #fff;
  .van-button {
    width: 3.76rem;
    height: 0.61333rem;
    border: 0.02667rem solid #eee;
    font-size: 0.4rem;
    line-height: 0.61333rem;
    color: #a7a7a7;
  }
  .van-icon {
    font-size: 0.53333rem;
    color: rgb(119, 119, 119);
  }
  .van-icon-star {
    color: rgb(255, 150, 50);
  }
}
</style>
